<template>
  <!-- 页面容器，设置背景颜色，允许上下滚动 -->
  <view class="activity-detail-page">

    <NavHeader title="活动详情" />

    <!-- 活动基本信息区域 -->
    <view class="activity-info">
      <view class="activity-title">
        <text class="activity-tag">招宣活动</text>
        <text class="activity-name">2023届应届生招生活动</text>
      </view>
      <view class="activity-item">
        <text class="item-label">活动来源</text>
        <text class="item-value">派发</text>
      </view>
      <view class="activity-item">
        <text class="item-label">活动时间</text>
        <view class="time-group">
          <text class="time-item">计划开始日期：2023/03/29</text>
          <text class="time-item">计划结束日期：2023/03/29</text>
          <text class="time-item">合计时长：1天</text>
        </view>
      </view>
      <view class="activity-item">
        <text class="item-label">活动区域</text>
        <text class="item-value">山西省/太原市/尖草坪区</text>
      </view>
      <view class="activity-item">
        <text class="item-label">活动牵头宣传组</text>
        <text class="item-value">宣传组001</text>
      </view>
    </view>

    <!-- 基本信息填写表单区域（仅结构，无具体内容） -->
    <view class="form-section">
      <text class="form-title">基本信息填写</text>
      <view class="form-item">
        <text class="form-label">职工号 *</text>
        <input type="text" class="form-input" placeholder="请输入职工号" />
      </view>
      <view class="form-item">
        <text class="form-label">姓名 *</text>
        <input type="text" class="form-input" placeholder="请输入姓名" />
      </view>
      <view class="form-item">
        <text class="form-label">单位 *</text>
        <input type="text" class="form-input" placeholder="请输入单位" />
      </view>
      <view class="form-item">
        <text class="form-label">职务 *</text>
        <input type="text" class="form-input" placeholder="请输入职务" />
      </view>
      <view class="form-item">
        <text class="form-label">职称 *</text>
        <input type="text" class="form-input" placeholder="请输入职称" />
      </view>
      <view class="form-item">
        <text class="form-label">联系方式 *</text>
        <input type="text" class="form-input" placeholder="请输入联系方式" />
      </view>
      <view class="form-item">
        <text class="form-label">毕业中学 *</text>
        <input type="text" class="form-input" placeholder="请输入毕业中学" />
      </view>
      <view class="form-item">
        <text class="form-label">籍贯 *</text>
        <input type="text" class="form-input" placeholder="请输入籍贯" />
      </view>
    </view>

    <!-- 立即报名按钮 -->
    <button class="submit-btn" @click="onSubmit">立即报名</button>
  </view>
</template>

<script setup>
const  onSubmit=()=> {

  uni.navigateTo({ url: '' })


}
const submitForm = () => {
  // 保存数据到本地存储（localStorage）
  localStorage.setItem('activityInfo', JSON.stringify(activityInfo.value));
  console.log('表单提交，数据已保存');
}


import NavHeader from '../../uni_modules/uni-icons/components/NavHeader.vue';
</script>

<style scoped>
.activity-detail-page {
  background-color: #e6f2ff; /* 设置背景颜色 */
  padding: 16px;
  height: 100vh; /* 让页面高度占满视口，以便滚动 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.activity-info {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.activity-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.activity-tag {
  color: #007aff;
  margin-right: 8px;
  background-color: #e6f2ff;
  padding: 2px 6px;
  border-radius: 4px;
}
.activity-name{
  flex: 1;
}

.activity-item {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.item-label {
  color: #888;
  margin-right: 8px;
  display: inline-block;
  width: 80px;
}
.item-text{
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  flex: 1;
  background-color: #fff;
}

.time-group {
  display: flex;
  flex-direction: column;
  margin-left: 80px;
}

.time-item {
  margin-bottom: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px;
  width: calc(100% - 80px);
  background-color: #fff;
}

.form-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.form-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.form-label {
  width: 80px;
  color: #888;
}

.form-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
}

.submit-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  width: 100%;
}
</style>